import React, { Fragment, PureComponent } from 'react'
// import PropTypes from 'prop-types'
import { Modal, Card, Button, Skeleton, Badge, Form, Input, Table, Spin } from 'antd'
import { connect } from 'dva'
import moment from 'moment'
import { SearchSelect } from 'scd'
import router from "umi/router"

const FormItem = Form.Item;

@connect(({ loading, dispatch, app }) => ({
  app,
  reloading: loading.effects['app/getOrgcompanyList'],
  joinloading: loading.effects['app/joinCompany'],
}))
@Form.create()

class OrgCompany extends PureComponent {
  state = {
    visiable: false,
    pageSizeOptions: ['10', '20', '50', '100', '200'],
    pageNum: 1,
    pageSize: 10,
  }

  JoinOrgModal = () => {
    this.setState({
      visiable: true
    })
  }

  handleOk = (e) => {
    e.preventDefault();
    const { pageNum, pageSize } = this.state
    const { dispatch, app: { singleOriginal }, form: { validateFields, resetFields } } = this.props;
    validateFields((err, values) => {
      if (err) return
      new Promise((resolve) => {
        dispatch({
          type: 'app/joinCompany',
          payload: {
            resolve,
            ...values,
            joinOrgId: singleOriginal.id,
            applyFlag: 2
          }
        })
      }).then((code) => {
        if (code === 1) {
          resetFields()
          this.setState({
            visiable: false
          })
          dispatch({
            type: 'app/getOrgcompanyList',
            payload: {
              orgId: singleOriginal.id,
              pageNum,
              pageSize
            }
          })
        }
      })
    });
  }
  handleCancel = () => {
    this.setState({
      visiable: false
    })
  }

  onShowSizeChange = (pageNum, pageSize) => {  //当几条一页的值改变后调用函数
    const { dispatch, app: { singleOriginal } } = this.props
    dispatch({
      type: 'app/getOrgcompanyList',
      payload: {
        orgId: singleOriginal.id,
        pageNum,
        pageSize
      }
    })
    this.setState({
      pageNum,
      pageSize
    })
  }
  onChange = (pageNum) => {
    const { pageSize } = this.state
    const { dispatch, app: { singleOriginal } } = this.props
    dispatch({
      type: 'app/getOrgcompanyList',
      payload: {
        orgId: singleOriginal.id,
        pageSize
      }
    })
    this.setState({ pageNum })
  }

  getFollowStatusFormat = (record, text) => {
    let status;
    switch (record.state) {
      case 0:
        status = 'success';
        break;
      case 1:
        status = 'error';
        break;
      case 2:
        status = 'success';
        break;
      case 3:
        status = 'warning';
        break;
    }
    return <Badge status={status} text={text} />;
  }
  companyJump = (record) => {
    router.push(`/myCompany/viewCompany/?id=${record.id}&state=${record.state}`)
  }


  render() {
    const { visiable, pageSizeOptions, pageNum, pageSize, } = this.state;
    const { reloading, joinloading, form: { getFieldDecorator },
      app: { orgCompanyList, singleOriginal } } = this.props;

    const columns = [
      {
        title: '公司名称',
        dataIndex: 'name',
        render: (text, record) => {
          return (
            <a onClick={e => this.companyJump(record)}>{record.name}</a>
          )
        }
      }, {
        title: '统一社会信用代码',
        dataIndex: 'creditCode',
      }, {
        title: '法人代表',
        dataIndex: 'legalPersonName',
      }, {
        title: '加入时间',
        dataIndex: 'joinOrgDate',
        render: (text, record) => {
          return (
            <span> {moment(text).format('YYYY-MM-DD')}</span>
          )
        }
      }, {
        title: '状态',
        dataIndex: 'stateName',
        render: (text, record) => {
          return this.getFollowStatusFormat(record, text);
        }
      }
    ];
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 },
      },
    };
    return (
      <Fragment>
        <Card
          style={{ marginTop: 16 }}
          type="inner"
          title="组织内公司"
        >
          <Skeleton active loading={!!reloading}>
            <Button onClick={this.JoinOrgModal}>邀请公司加入组织</Button>
              {orgCompanyList && <Table
                rowKey="id"
                style={{ marginTop: '20px' }}
                columns={columns}
                dataSource={orgCompanyList.list}
                pagination={{
                  total: orgCompanyList.total, //数据总数量
                  pageSizeOptions: pageSizeOptions,  //显示几条一页
                  defaultPageSize: pageSize, //默认显示几条一页
                  showSizeChanger: true,  //是否显示可以设置几条一页的选项
                  showQuickJumper: true,
                  onShowSizeChange: this.onShowSizeChange,
                  onChange: this.onChange,
                  showTotal: (total, range) => `当前(${range[0]}-${range[1]})条 -- 共${total}条记录`
                }}
              />}
          </Skeleton>
        </Card>

        <Modal
          title='邀请公司加入组织'
          visible={visiable}
          confirmLoading={!!joinloading}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          <Form layout="horizontal">
            <FormItem {...formItemLayout} label="公司名称">
              {getFieldDecorator('applyCompanyId', {
                rules: [{ required: true, message: '请输入公司名称', },],
              })(<SearchSelect
                textFieldName="name"
                valueFieldName="id"
                queryFieldName="companyName"
                notFoundContent="找不到该公司"
                url="api/v1/ucenter/company/queryLikeName"
              />)}
            </FormItem>
            <FormItem {...formItemLayout} label="加入的组织">
              {singleOriginal.name || "xxx"}
            </FormItem>
            <FormItem {...formItemLayout} label="邀请说明" >
              {getFieldDecorator('remark')
                (<Input.TextArea style={{ height: '100px' }} placeholder="请输入描述" />)
              }
            </FormItem>
          </Form>
        </Modal>
      </Fragment>
    )
  }
}


export default OrgCompany
